<template>
  <div class="wrap">
    <!-- 添加账号 -->
    <div class="account" v-if="accountShow">
      <div class="account-top">
        <p class="account-top-title">添加帐号</p>
        <!-- <div class="account-cancle" @click="closeAccount">
          <img class="account-cancle-img" src="~assets/images/account-cancle.png"/>
        </div> -->
      </div>
      <div class="account-box">
        <div class="account-item" v-for="(item,index) in accountList" :key="index" @click="selectAccount(item,index)">
          <img class="account-item-img" :src="item.icon" />
          <p class="account-item-name">{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 登录账号 -->
    <!-- <div class="login-wrap" v-if="loginBoxShow">
      <div class="account-top">
        <p class="account-top-title">登录帐号</p>
        <div class="account-cancle" @click="closeLogin">
          <img class="account-cancle-img" src="~assets/images/account-cancle.png" />
        </div>
      </div>
      <div class="login-content">
        <img class="login-logo-img" src="~assets/images/douyin-login.png" />
        <div class="login-box">
          <div class="login-tab">
            <div :class="loginType == 1 ? 'login-tab-item1' : 'login-tab-item2'" @click="changeLoginType(1)">扫描登录</div>
            <div :class="loginType == 2 ? 'login-tab-item1' : 'login-tab-item2'" @click="changeLoginType(2)">手机号登录</div>
          </div>
          <div class="login-msg">
            <div class="login-qrcode" v-if="loginType == 1">
              <img class="login-qrcode-img" src="~assets/images/login-qrcode.png" />
              <p class="login-qrcode-text">使用APP扫描二维码登录</p>
            </div>
            <div class="login-qrcode" v-if="loginType == 2">
              <div class="text-alert" v-show="mobileshow">{{mobileNum}}</div>
              <div class="login-account">
                <input class="input-account" placeholder="请输入手机号" type="number" v-model="mobile" />
              </div>
              <div class="login-account">
                <input class="input-account" placeholder="请输入验证码" type="number" v-model="vcode" />
                <div class="login-send-code" :class="controlClick ? 'send-code-text1' : 'send-code-text2' " @click="sendCode">{{timerStr}}</div>
              </div>
              <div class="login-btn" @click="login">登录/注册</div>
              <p class="login-agree">注册/登录即代表同意服务协议及隐私政策</p>
            </div>
          </div>
          
        </div>
      </div>
    </div> -->

  </div>
</template>

<script>
export default {
  async fetch({app,store}) {
    await store.commit('setMultiPlat', 1)
  },
  layout: 'intermulti',
  data(){
    return{
      accountShow:true, // 添加账号列表显示隐藏
      accountList:[], // 账号列表
      loginBoxShow:false, // 登录账号显示隐藏
      loginType:1, // 1 扫描登录，2 手机号登录
      mobile:'',// 登录账户
      vcode:'',// 验证码
      timer: null, // 登录定时器
      time: 60, // 时间60s
      timerStr:'获取验证码',// 
      controlClick: true, // 控制点击
      mobileshow: false,//控制显示文字提示，
      mobileNum:'请输入手机号',//后台返回手机号格式问题提示，设置给前端
      test:''//只让弹窗弹出一次
    }
  },
  mounted(){
    this.getAccountList();
  },
  beforeDestroy() { //销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  watch: {
    mobile() {
      this.mobileshow = false;
    }
  },
  methods:{
    // 选择添加帐号
    selectAccount(item,index) {
      // const {href} = this.$router.resolve({
      //   path:'/connect',
      //   query:{id:}
      // })
      // window.open(href, '_blank')
      window.open(item.oauthUrl,'_blank'); // 新窗口打开外链接
    },
    // 初始化添加平台列表
    getAccountList() {
      let _this = this;
      this.$axios.$post('addAccountInit').then(res => {
        if(res.status === 200){
          _this.accountList = res.obj;
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          });
         }
      })
      .catch(err => {
        	this.$message({
              message:'请求失败',  
              type:'warning'
          })
      })
    },
  }
}
</script>

<style scoped>
  .wrap {
    display: flex;
    justify-content: center;
    padding: 120px 0;
  }
  .account {
    width:720px;
    height:560px;
    background-color:#ffffff !important;
    border-radius: 4px;
    overflow: auto;
  }
  .account-top {
    height: 48px;
    background: #0096e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .account-top-title {
    font-size: 16px;
    color: #ffffff;
    margin-left: 16px;
  }
  .account-cancle {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .account-cancle-img {
    width: 14px;
    height: 14px;
  }
  .account-box {
    margin: 0 24px;
    display: flex;
    flex-wrap: wrap;
  }
  .account-item {
    width: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 26px 0 0 26px;
  }
  .account-item img{
    cursor:pointer;
  }
  .account-item-img {
    width: 66px;
    height: 66px;
    border-radius: 10px;
  }
  .account-item-name {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
  }
  .login-wrap {
    width:900px;
    height:560px;
    background:#ffffff;
    border-radius: 4px;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  .login-content {
    flex: 1;
    background: #0e0f1a;
  }
  .login-logo-img {
    width: 140px;
    height: 58px;
    margin-left: 25px;
    margin-top: 10px;
  }
  .login-bg {
    display: flex;
    justify-content: center;
  }
  .login-box {
    width: 440px;
    height: 360px;
    background: #ffffff;
    border-radius: 5px;
    margin: 10px auto;
    padding: 0 28px;
  }
  .login-tab {
    flex:1;
    display: flex;
    align-items: center;
    cursor:pointer;
  }
  .login-tab-item1 {
    flex: 1;
    height: 68px;
    line-height: 68px;
    font-size: 16px;
    color: #333;
    text-align: center;
    border-bottom: 2px #333 solid;
  }
  .login-tab-item2 {
    flex: 1;
    height: 68px;
    line-height: 68px;
    font-size: 16px;
    color: #999;
    text-align: center;
    border-bottom: 2px #e1e1e1 solid;
  }
  .login-msg {
    display: flex;
    justify-content: center;
  }
  .login-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
  .login-qrcode-img {
    margin-top: 15px;
    width: 200px;
    height: 200px;
  }
  .login-qrcode-text {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
  }
  .login-account {
    margin-top: 20px;
    width: 300px;
    height: 40px;
    border: 1px #e5e5e5 solid;
    border-radius: 4px;
    display: flex;
    align-items: center;
  }
  .input-account {
    flex:1;
    margin-left: 20px;
    font-size: 14px;
  }
  .login-send-code {
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f4f4f4;
  }
  .send-code-text1 {
    font-size: 14px;
    color: #999;
    cursor:pointer;
  }
  .send-code-text2 {
    font-size: 14px;
    color: #0096e6;
  }
  .text-alert {
    width: 300px;
    font-size: 14px;
    color: red;
    text-align: left;
    padding-left: 10px;
  }
  .login-btn {
    margin-top: 20px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    background: #0e0f1a;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    cursor:pointer;
  }
  .login-agree {
    font-size: 14px;
    color: #999;
    margin-top: 30px;
  }

</style>
